stylefmt is a tool that automatically formats CSS according to stylelint rules
Modern CSS Formatter
stylefmt is a tool that automatically formats CSS according to stylelint rules.
stylefmt'd code is:
If you are using stylefmt with stylelint configuration to format according to its rules, you can now use stylelint's --fix option (from v7.11.0) to autofix.
Another on the other hand, prettier supports to format not only JavaScript but also CSS, SCSS and Less code.
calc() and nesting..stylelintrc).Input (input.css):
/* custom properties */
:root{--fontSize: 1rem;
--mainColor :#12345678;
--highlightColor:hwb(190, 35%, 20%);
}
/* custom media queries */
@custom-media
--viewport-medium(width<=50rem);
/* some var() & calc() */
body{color:var(--mainColor);
font-size:var(--fontSize);
line-height: calc(var(--fontSize) * 1.5);
padding: calc((var(--fontSize) / 2) + 1px)}
/* custom media query usage */
@media (--viewport-medium) {
body {font-size: calc(var(--fontSize) * 1.2); }
}
/* custom selectors */
@custom-selector :--heading h1,h2,h3, h4,h5,h6;
:--heading { margin-top:0 }
/* colors stuff */
a{
color:var(--highlightColor);
transition:color 1s;
}
a:hover{color :gray(255,50%) }
a:active{color : rebeccapurple }
a:any-link { color:color(var(--highlightColor) blackness(+20%)) }
/* font stuff */
h2 {font-variant-caps:small-caps;
}table{font-variant-numeric: lining-nums;
}
/* filters */
.blur{filter:blur(4px)}.sepia{
filter: sepia(.8);}
Yield:
/* custom properties */
:root {
--fontSize: 1rem;
--mainColor: #12345678;
--highlightColor: hwb(190, 35%, 20%);
}
/* custom media queries */
@custom-media --viewport-medium (width <= 50rem);
/* some var() & calc() */
body {
color: var(--mainColor);
font-size: var(--fontSize);
line-height: calc(var(--fontSize) * 1.5);
padding: calc((var(--fontSize) / 2) + 1px);
}
/* custom media query usage */
@media (--viewport-medium) {
body {
font-size: calc(var(--fontSize) * 1.2);
}
}
/* custom selectors */
@custom-selector :--heading h1, h2, h3, h4, h5, h6;
:--heading {
margin-top: 0;
}
/* colors stuff */
a {
color: var(--highlightColor);
transition: color 1s;
}
a:hover {
color: gray(255, 50%);
}
a:active {
color: rebeccapurple;
}
a:any-link {
color: color(var(--highlightColor) blackness(+20%));
}
/* font stuff */
h2 {
font-variant-caps: small-caps;
}
table {
font-variant-numeric: lining-nums;
}
/* filters */
.blur {
filter: blur(4px);
}
.sepia {
filter: sepia(.8);
}
Input (input.scss):
// mixin for clearfix
@mixin clearfix () { &:before,
&:after {
content:" ";
display : table; }
&:after {clear: both;}
}.class
{
padding:10px;@include clearfix();}
.base { color: red; }
// placeholder
%base
{
padding: 12px
}
.foo{
@extend .base;}
.bar
{ @extend %base;
}
Yield:
// mixin for clearfix
@mixin clearfix () {
&:before,
&:after {
content: " ";
display: table;
}
&:after {
clear: both;
}
}
.class {
padding: 10px;
@include clearfix();
}
.base {
color: red;
}
// placeholder
%base {
padding: 12px;
}
.foo {
@extend .base;
}
.bar {
@extend %base;
}
$ npm install stylefmt
CLI Help:
$ stylefmt --help
Usage: stylefmt [options] input-name [output-name]
Options:
-b, --config-basedir Path to the directory that relative paths defining "extends"
-c, --config Path to a specific configuration file (JSON, YAML, or CommonJS)
-d, --diff Output diff against original file
-r, --recursive Format list of space seperated files(globs) in place
-v, --version Output the version number
-h, --help Output usage information
-i, --ignore-path Path to a file containing patterns that describe files to ignore.
--stdin-filename A filename to assign stdin input.
stylefmt can also read a file from stdin if there are no input-file as argument in CLI.
$ cat input.css | stylefmt --stdin-filename input.css
var fs = require('fs');
var postcss = require('postcss');
var scss = require('postcss-scss'); // when you use scss syntax
var stylefmt = require('stylefmt');
var css = fs.readFileSync('input.css', 'utf-8');
postcss([
stylefmt
]).process(css, {
from: 'input.css',
syntax: scss
})
.then(function (result) {
result.css; // formatted code
});
We can use stylefmt in Grunt, gulp, and Fly.
stylefmt :heart: stylelint
stylefmt supports the following stylelint rules:
and we can also format from the other stylelint's configration files or packages (e.g. stylelint-config-standard, stylelint-config-suitcss and so on) using extends property.
{{:: and values; in last declaration!important! and important@import@mixin and mixin name(@extend and base rules@include and mixin name$variable and :: and name of variableThe MIT License (MIT)
Copyright (c) 2015 Masaaki Morishita
FAQs
stylefmt is a tool that automatically formats CSS according to stylelint rules
The npm package stylefmt receives a total of 3,061 weekly downloads. As such, stylefmt popularity was classified as popular.
We found that stylefmt demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Node.js will be enforcing stricter semver-major PR policies a month before major releases to enhance stability and ensure reliable release candidates.
Security News
Research
Socket's threat research team has detected five malicious npm packages targeting Roblox developers, deploying malware to steal credentials and personal data.
Security News
vlt introduced its new package manager and a serverless registry this week, innovating in a space where npm has stagnated.